<wicket:panel>
	<div class="revision-diff">
		<div wicket:id="revisionsIndexing" class="alert alert-notice alert-light-warning revision-indexing">
			<wicket:svg href="loading" class="icon spin mr-1"/>
			Revision indexing in progress... (symbol navigation in revisions will be accurate after indexed)
		</div>
		<!-- disable auto focus here as otherwise we have problems jumping to marked code blocks -->
		<div class="head no-autofocus d-flex align-items-center flex-nowrap">
			<span wicket:id="operations" class="btn-group mr-3">
				<a wicket:id="batchedSuggestions" class="batched-suggestions btn btn-light flex-shrink-0" title="Batched suggestions"><wicket:svg href="diff" class="icon icon-lg mr-2"/> <span wicket:id="count" class="mr-1">3</span><wicket:svg href="arrow" class="icon rotate-90"/></a>
				<a wicket:id="option" class="btn btn-light btn-icon btn-lg flex-shrink-0"><wicket:svg href="gear" class="icon"/></a>
			</span>
			<div class="path-filter flex-grow-1 mr-5">				
				<form wicket:id="pathFilter">
					<div class="clearable-wrapper">
						<div class="input-group">
                            <input wicket:id="input" class="form-control" spellcheck="false" autocomplete="off" placeholder="Filter by path">
							<span class="input-group-append">
								<button wicket:id="submit" title="Filter" class="btn btn-icon btn-outline-secondary" type="submit"><wicket:svg href="magnify" class="icon"></wicket:svg></button>
							</span>
						</div>
					</div>
				</form>
			</div>
			<div wicket:id="navs" class="ml-auto flex-shrink-0 border rounded navs">
				<div wicket:id="showAllFiles" class="font-size-lg d-flex align-items-center flex-nowrap flex-shrink-0">
					<span wicket:id="totalFiles"></span> 
					<wicket:enclosure child="showSingleFile">
					<span class="dot mx-3"></span>
					<a wicket:id="showSingleFile">Show one by one</a>
					</wicket:enclosure>
				</div>
				<div wicket:id="showSingleFile" class="font-size-lg d-flex align-items-center flex-nowrap flex-shrink-0">
					<span wicket:id="message"></span>
					<a wicket:id="prev" class="ml-3">Prev</a>
					<a wicket:id="next" class="ml-2">Next</a>
					<span class="dot mx-3"></span>
					<a wicket:id="showAllFiles">Show all files</a>
				</div>
			</div>
		</div>
		<div wicket:id="body" class="body">
			<div wicket:id="feedback"></div>
			<div wicket:id="tooManyFiles" class="alert alert-notice alert-light-warning"></div>
			<div class="detail d-flex align-items-stretch">
				<div wicket:id="comment" class="comment need-width border border-right-0 rounded d-flex overflow-hidden flex-shrink-0 position-sticky mr-4">
					<div class="content flex-grow-1 overflow-hidden d-flex flex-column">
						<div wicket:id="head" class="head d-flex align-items-center px-3 py-2 border-bottom">
							<h6 class="mb-0 mr-2">Code Comment</h6>
							<span wicket:id="outdated" class="mr-2 badge badge-sm badge-warning">outdated</span>
							<span wicket:id="status" class="mr-2"></span>
							<a wicket:id="locate" title="Show commented code snippet" class="btn btn-xs btn-icon btn-hover-primary btn-light locate ml-2 mr-3"><wicket:svg href="hand" class="icon"></wicket:svg></a>
							<a wicket:id="close" class="ml-auto" title="Hide comment"><wicket:svg href="times" class="icon"></wicket:svg></a>
						</div>
						<div wicket:id="body" class="body overflow-auto flex-grow-1 p-3"></div>
					</div>
					<div class="ui-resizable-handle ui-resizable-e flex-shrink-0"></div>
				</div>
				<ul class="diffs list-unstyled flex-grow-1 mb-0">
					<li wicket:id="diffs" class="diff mb-4">
						<div wicket:id="diff"></div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<wicket:fragment wicket:id="newCommentFrag">
		<form wicket:id="form" class="new-comment leave-confirm">
			<div wicket:id="feedback" class="feedback"></div>
			<div class="form-group">
				<div wicket:id="content"></div>
			</div>
			<div class="actions">
				<button wicket:id="save" class="btn btn-sm btn-primary dirty-aware">Save</button>
				<button wicket:id="cancel" class="btn btn-sm btn-secondary">Cancel</button>
			</div>
		</form>
	</wicket:fragment>
</wicket:panel>